miDxD = {};

window.addEvent ('domready', function () {
	
	// Variables de Drags y Drops
	var $drags = $$('#drags div');
	var $drops = $$('#drops p span');
	
	// Creamos objeto tipo Drag and Drop Basico
	miDxD = new DxD ($drags, $drops, {
		container: $('content'),
		dragDelete: true,
		sendToBack: 'ini',
		cssClass: 'miDxD',
		adjDrags: [
			{ x: 110, y: 500 },
			{ x: 300, y: 500 },
			{ x: 490, y: 500 }
		],
		optionsDrops: {
			umbral: 0
		}
	});

	miDxD.addEvents ({
		'beforeStart': function ($objDrag) {
			//console.log ($objDrag);
		},
		
		'drag': function ($objDrag) {
			$('dragInfo').set ('html',
				'<p>value.now.x: <b>'+$objDrag.value.now.x+'</b><p>' + 
				'<p>value.now.y <b>'+$objDrag.value.now.y+'</b><p>' + '<br />' +

				'<p>value.umbral.x: <b>'+$objDrag.value.umbral.x+'</b><p>' +
				'<p>value.umbral.y <b>'+$objDrag.value.umbral.y+'</b><p>' + '<br />'
			)
		},
		
		'enter': function ($objDrag, $objDrop) {
			$('dropInfo').set ('html',
				'<p>umbral.left: <b>'+$objDrop.value.left+'</b><p>' +
				'<p>umbral.top: <b>'+$objDrop.value.top+'</b><p>' + '<br />' +

				'<p>umbral.right: <b>'+$objDrop.value.right+'</b><p>' +
				'<p>umbral.bottom: <b>'+$objDrop.value.bottom+'</b><p>'
			)
		}
    })
	
	miDxD.elDrags.each (function ($objDrag, $iB) {
		//$objDrag.node.set('html', '(' + $objDrag.mouse.now.x + ', ' + $objDrag.mouse.now.y +')');
	});
	
	miDxD.elDrops.each (function ($objDrop, $iB) {
		//console.debug('html', '(' + $objDrop.value.left + ', ' + $objDrop.value.top +') - (' + $objDrop.value.right + ', ' + $objDrop.value.bottom +')');
        $objDrop.node.addEvent ('mousedown', function () {
            console.debug ($objDrop);
        })
	});		
});